<template>
	<view>
		<view class="banner-bg">
			<image src="@/pages/agent/static/icon/vip-bg.png" mode="widthFix"></image>
			<view>尊享会员<text>4</text>大权益</view>
		</view>
		<view class="data-count">
			<view class="u-flex item num1">
				<text class="iconfont icon-chushou"></text>
				<view class="tit">售后按揭</view>
				<view class="info u-flex">
					<view>
						<text class="num">1</text>
						<text>免费试用次数</text>
					</view>
				</view>
			</view>
			<view class="u-flex item num2">
				<text class="iconfont icon-2_2jiazhengshiwu"></text>
				<view class="tit">家政服务</view>
				<view class="info u-flex">
					<view>
						<text class="num">10</text>
						<text>需要服务次数</text>
					</view>
					<view>
						<text class="num">2</text>
						<text>已服务次数</text>
					</view>
				</view>
			</view>
			<view class="u-flex item num1">
				<text class="iconfont icon-mianfei-fuben8-fuben"></text>
				<view class="tit">免保证金</view>
				<view class="info u-flex">
					<view>
						<text>免保证金权益</text>
					</view>
				</view>
			</view>
			<view class="u-flex item num2">
				<text class="iconfont icon-pingtai"></text>
				<view class="tit">免费平台</view>
				<view class="info u-flex">
					<view>
						<text>免费使用权益</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.banner-bg{
		position: relative;
		view{
			position: absolute;left: 50%;transform: translateX(-50%);top: 40%;letter-spacing: 4rpx;white-space: nowrap;
			color: #fff;font-weight: bold;font-size: 40rpx;vertical-align: bottom;padding: 0 4rpx;
			text{color: #ffde08;font-size: 50rpx;}
		}
		image{display: block;width: 100%;}
	}
	// 上架数据统计
	.data-count{
		margin-top: 20rpx;position: relative;z-index: 1;padding: 0 30rpx 20rpx;
		.item{
				margin-top: 30rpx;border-radius: 40rpx;background-color: #fff;box-shadow: 0 4rpx 10rpx #ddd;height: 200rpx;position: relative;
				.tit{padding: 0 36rpx;font-weight: bold;font-size: 40rpx;}
				.info{
					position: relative;
					view{color: #111;font-size: 30rpx;vertical-align: bottom;border-left: 2rpx solid #ddd;padding: 0 25rpx;
						&:first-child{border-left: 0;}
						text{display: block;text-align: center;}
					}
					.num{font-weight: bold;font-size: 40rpx;}
				}
				.iconfont{position: absolute;right: 30rpx;font-size: 80rpx;opacity: .5;bottom: 20rpx;}
				.icon-chushou{font-size: 90rpx;}
				.icon-pingtai{font-size: 70rpx;}
				
				&:first-child{margin-top: 0;}
				&.num1{
					.tit,.num,.icon-chushou,.icon-mianfei-fuben8-fuben{color: #f8603d;}
				}
				&.num2{
					.tit,.num,.icon-pingtai,.icon-2_2jiazhengshiwu{color: #107ef9;}
				}
		}
	}
</style>
